<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>新建收货地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="新建收货地址">
    <meta name="description" content="新建收货地址">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox addresspage hasmenu" id="app" v-if="loaded==true">
    <div class="content">
      <div class="form">
        <div class="row"><div class="input"><span>收货人：  </span><input type="text" v-model="xingming" placeholder="请输入收货人"></div></div>
        <div class="row"><div class="input"><span>手机号码：</span><input type="text" v-model="mobile" placeholder="请输入手机号码"></div></div>
        <div class="row">
          <div class="input">
            <span>所在地区：</span>
            <el-select v-model="area" placeholder="请选择所在地区">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row"><div class="input"><span>详细地址：</span><input type="text" v-model="address" placeholder="请输入详细地址"></div></div>
      </div>   
    </div>
    <div class="bottom">
        <div class="btn" @click="saveaddress"><span>保 存</span></div>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        options: [{
          value: '菏泽市成武县',
          label: '菏泽市成武县'
        }],
        xingming:'',
        mobile:'',
        area:'菏泽市成武县',
        address:'',
        loaded: true,
      }
    },
    mounted() {
      
      var that = this;
    },
    methods: {
      saveaddress: function () {
        var that = this;
        var checkmobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
        layer.closeAll();
        if (!that.xingming) {
          layer.msg('请输入收货人');
          return false;
        }
        if (!that.mobile) {
          layer.msg('请输入手机号码');
          return false;
        } else if (!checkmobile.test(that.mobile)) {
          layer.msg('您输入手机号码有误，请重新填写');
          return false;
        }
        if (!that.area) {
          layer.msg('请输入所在地区');
          return false;
        }
        if (!that.address) {
          layer.msg('请输入详细地址');
          return false;
        }
        layer.msg('保存成功');
        setTimeout(()=>{
          layer.closeAll();
        },2000)
        setTimeout(()=>{
          // 返回并刷新上一页
          window.history.back();
        },2500)
      },
    }
  });
</script>
</html>